<template>

	<view class="star">
		<image mode="aspectFit" v-for="(item,index) in stars" :key="index" :src="bindImg(item)"
			@click="setStar(item,index)">
		</image>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				starNoImg: './star-no.png',
				starImg: './stars.png',
				starValue: 5
			};
		},
		props: {
			stars: {
				type: Array
			}
		},
		methods: {
			bindImg(item) {
				return require(item.types ? "./stars.png" : "./star-no.png");
			},
			setStar(item, index) { //设置评价星星
				let that = this
				if (item.types == false) {
					for (var i = 0; i <= index; i++) {
						console.log(that.stars[i].types)
						that.stars[i].types = true
						that.stars[i].img = that.starImg
					}
				} else {
					for (var i = index + 1; i < that.stars.length; i++) {
						console.log(that.stars[i].types)
						that.stars[i].types = false
						that.stars[i].img = that.starNoImg
					}
				}
				this.$forceUpdate() //强制刷新视图
				let value = this.stars.filter((e) => {
					return e.types == true
				})
				this.starValue = value.length

				this.$emit("click", this.starValue)

				console.log("stars = " + this.starValue);
			},

		}
	};
</script>


<style lang="scss" scoped>
	.star {
		margin-top: 30upx;
		display: flex;
		align-items: center;
		margin-left: 20upx;

		image {
			height: 40upx;
			width: 40upx;
			display: inline-block;
			// 星星间隔
			margin-right: 20px;


		}

		// 增加点击效果
		&:active {
			opacity: .5;
		}
	}
</style>